<template>
  <div>

    <el-form :model="queryObj" :inline="true" class="query-form">
      <el-form-item label="公链名称">
        <el-select v-model="queryObj.chainName" placeholder="请选择公链名称" clearable style="width: 200px;">
          <el-option v-for="item in chainList" :key="item.chainName" :label="item.chainName" :value="item.chainName" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">
          查询
        </el-button>
        <el-button type="default" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-empty v-if="!tableData || !tableData.length" description="暂无数据" />
    <div v-else>
      <el-table :data="tableData" border stripe style="width: 100%" :pagination="true">
        <el-table-column prop="chainName" :label="'主链名称'" width="150" align="center" />
        <el-table-column prop="status" :label="'状态'" width="200" align="center">
          <template #default="scope">
            {{ getRowStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="value" :label="'金额'" width="200" align="center">
          <template #default="scope">
            {{ scope.row.value + " " + scope.row.symbolName }}
          </template>
        </el-table-column>
        <el-table-column prop="timestamp" :label="'时间'" width="200" align="center">
          <template #default="scope">
            {{ dayjs(scope.row.timestamp * 1000).format("YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column prop="from" :label="'from 地址'" width="250" align="center" />
        <el-table-column prop="to" :label="'to 地址'" width="250" align="center" />
        <el-table-column prop="txHash" :label="'交易哈希'" align="center" />
      </el-table>
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 500]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getUpCoinListApi, getConfigList } from "@/require/api.js";
import { dayjs } from "element-plus";

onMounted(() => {
  // 获取充币列表
  getUpCoinList();
  // 获取公链名称列表
  getChainList();
});

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const queryObj = ref({
  chainName: "",
});
const chainList = ref([]);

// 获取充币列表
async function getUpCoinList() {
  try {
    let params = {
      pageIndex: currentPage.value.toString(),
      pageSize: pageSize.value.toString(),
      chainName: queryObj.value.chainName || null,
    };
    let res = await getUpCoinListApi(params);
    if (res.code === 200) {
      tableData.value = res.data.list;
      total.value = res.data.total;
    }
  } catch (error) {
    console.log('getUpCoinListApi - error', error);
  }
};

// 切换分页器每页数据的条数
function handleSizeChange(e) {
  pageSize.value = e;
  // 获取充币列表
  getUpCoinList();
};

// 切换分页
function handleCurrentChange(e) {
  currentPage.value = e;
  // 获取充币列表
  getUpCoinList();
};

// 获取公链名称信息
async function getChainList() {
  try {
    let res = await getConfigList();
    if (res.code === 200) {
      chainList.value = res.data;
    }
  } catch (error) {
    console.log('getConfigList - error', error);
  }
};

// 查询
function query() {
  // 获取充币列表
  getUpCoinList();
};

// 重置查询条件
function resetQuery() {
  queryObj.value.chainName = "";
  // 获取充币列表
  getUpCoinList();
};

// 获取表格中的status列显示
function getRowStatus(status) {
  if (status === 0) {
    return "待审核";
  } else if (status === 1) {
    return "审核通过";
  } else if (status === 2) {
    return "审核驳回";
  } else if (status === 3) {
    return "交易成功";
  } else if (status === 4) {
    return "交易失败";
  }
};

</script>

<style lang="less" scoped>
.query-form {
  text-align: left;
}
</style>